<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      .active {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
  <script>
    /*
      1.多个操作会影响同一个数据 这个数据变化 还要执行某个操作
      2.数据是从其他组件传过来的，想知道何时发生了改变

      立即执行、深度监听、监听对象某个属性的变化
    */

    let app = Vue.createApp({
      data() {
        return {
          // 分类请求的参数对象
          paramsObj: {
            page: 1,
            pageSize: 10,
            sort: "asc",
            typeId: "336",
          },
        };
      },
      methods: {
        async getList() {
          // let { data } = await axios.get("", {
          //   params: this.paramsObj,
          // });
          console.log("paramObj发生变化");
        },
      },

      // 数据监听
      // 默认的监听方式   paramsObj=新值
      // 对象属性变化无法监测   需要深度监听
      watch: {
        paramsObj: {
          immediate: true,
          deep: true, //深度监听
          handler() {
            this.getList();
          },
        },
        // 监听对象下某个属性的变化
        "paramsObj.page"() {
          console.log("page发生了变化");
        },
      },
    });

    // mounted  beforeUnmount
    app = app.mount("#app");
  </script>
</html>
